<template>

  <el-dialog
      class="startActTaskUserHandler"
      :title="dialogTitle"
      v-model="dialog.visible"
      fullscreen
      append-to-body
      v-loading.fullscreen.lock="loadTaskInfoLoading"
      :before-close="dialogClose">

    <el-row :gutter="24" style="height: 100%">
      <el-col :span="procSpan">
        <el-divider content-position="left">申请人提交内容</el-divider>
        <start-act-main-form ref="startActMainForm" :detail="true"></start-act-main-form>
      </el-col>
      <el-col
          :span="24-6-procSpan">
        <start-act-task-from ref="startActTaskForm" @submit="actTaskFormCall"></start-act-task-from>
      </el-col>
      <el-col :span="5">
        <el-divider content-position="left">审批流程</el-divider>
        <start-act-proc-legend style="height: calc(100% - 50px);overflow: scroll" ref="startActProcLegend"></start-act-proc-legend>
      </el-col>
    </el-row>


    <template #footer>
      <el-button @click="dialogClose">取消</el-button>
      <el-popover
          placement="top"
          title="您要驳回那个节点呢？点击即可列表任意一项即可驳回"
          :width="400"
          trigger="hover">
        <avue-crud :data="procTasks"
                   :option="rejectTaskOption"
                   @row-click="taskHandlerReject"
        ></avue-crud>
        <template #reference>
          <el-button plain icon="el-icon-circle-close" v-if="procTasks.length>0" type="danger">驳回</el-button>
        </template>
      </el-popover>
      <el-button @click="$refs.startActTaskForm.submit()" icon="el-icon-check" type="success">同意</el-button>
    </template>

  </el-dialog>

</template>

<script>
import startMyActTaskApi from "@/api/start/activiti/core/startMyActTaskApi";
import StartActMainForm from "./startActMainForm.vue";
import StartActTaskFrom from "./task/startActTaskFrom.vue";
import StartActProcLegend from "./startActProcLegend.vue";

export default {
  name: "startActTaskUserHandler",
  components: {StartActProcLegend, StartActTaskFrom, StartActMainForm},
  computed: {
    rejectTaskOption() {
      return {
        menu: false,
        addBtn: false,
        delBtn: false,
        editBtn: false,
        header: false,
        maxHeight: 300,
        column: [
          {
            prop: "taskName",
            label: '节点/任务名称',
            overHidden: true,
          },
          {
            prop: "handlerUser.userFinalName",
            bind: "handlerUser.userFinalName",
            label: '审批人',
            overHidden: true,
          },
          {
            prop: "authDateTime",
            label: '审批时间',
            format: "YYYY.MM.DD HH:mm",
            valueFormat: "YYYY.MM.DD HH:mm",
            overHidden: true,
          },
        ]
      }
    },
    procSpan() {
      if (!this.procModel) {
        return 18;
      }
      let procTasks = this.procModel.procTasks
      if (!procTasks || procTasks.length < 1) {
        return 18;
      }
      let tasks = procTasks.filter(e => e.handlerState > 0 && !!e.taskFormConfig)
      if (tasks.length > 0) {
        return 9;
      }
      return 18;
    },
    dialogTitle() {
      if (!this.procModel || !this.procModel.procName) {
        return "加载中";
      }
      return `【${this.procModel.startUser.userFinalName}】的【${this.procModel.procName}】流程任务处理`;
    },
    procTasks() {
      if (!this.procModel) {
        return [];
      }
      let procTasks = this.procModel.procTasks
      if (!procTasks) {
        return []
      }
      let tasks = procTasks.filter(e => [20].includes(e.handlerState));
      let result = []
      for (let i = tasks.length - 1; i > -1; i--) {
        let item = tasks[i]
        result.push(item)
      }
      let startUser = this.procModel.startUser
      result.push({taskName: '申请人', handlerUser: startUser})
      return result;
    }

  },
  data() {
    return {
      dialog: {
        visible: false
      },
      procModel: {},
      loadTaskInfoLoading: true,
      taskId: null,
    }
  },
  created() {
    this.loadTaskInfoLoading = false;
  },
  methods: {

    dialogClose() {
      this.dialog.visible = false;
      this.loadTaskInfoLoading = false;
      this.taskId = null;
    },
    show(row) {
      this.dialog.visible = true;
      this.loadTaskInfoLoading = true;
      this.loadTaskInfo(row);
    },
    loadTaskInfo(row) {
      this.taskId = row.taskId;
      startMyActTaskApi.getWaitAuthTaskDetail(this.taskId).then(res => {
        let data = res.data.data;
        this.procModel = data;
        this.$refs.startActProcLegend.init(data)
        this.$refs.startActMainForm.init(data.procFormConfig, data.procFormData)
        this.$refs.startActTaskForm.init(data.procTasks)
      }).catch(err => {
        this.$message.error('任务信息加载失败请联系管理员');
      }).finally(() => this.loadTaskInfoLoading = false)
    },

    actTaskFormCall(data) {
      this.submitActTaskForm(data, data.formDone)
    },
    taskTaskAgree(taskData, done) {
      console.log("taskData", taskData)
      let data = {};
      data.handlerStatus = 20;
      data.nodeFormData = taskData.formData;
      data.nextTaskAuthUser = taskData.nextTaskAuthUser;
      data.nodeVariables = null;
      data.authUser = null;
      data.targetTaskDefKey = null;
      data.targetTaskAuthUsers = null;
      let config = {};
      this.createdPrompt("系统提示", "请输入处理意见", null, config).then(({value}) => {
        data.handlerOpinion = value
        return startMyActTaskApi.handlerNodeApply(this.taskId, data)
      }).then(res => {
        this.$message.success('任务处理成功');
        setTimeout(() => this.$emit("refresh"), 100)
        this.dialogClose()
      }).finally(() => {
        if (done) {
          done();
        }
      })
    },
    createdPrompt(title, content, inputValidator, obj = {}) {
      let config = {}
      config.confirmButtonText = "提交"
      config.cancelButtonText = "取消"
      config.showInput = true;
      config.inputType = "textarea";
      config.inputValidator = inputValidator
      config = Object.assign(config, obj)
      return this.$prompt(content, title, config)
    },
    /**
     * 流程驳回
     */
    taskHandlerReject(row, column, event) {
      let data = {};
      data.handlerStatus = row.taskDefKey ? 80 : 90;
      data.targetTaskDefKey = data.handlerStatus === 90 ? null : row.taskDefKey;
      this.$confirm(`您确定要驳回当前流程任务到【${row.taskName}】节点吗？`, '系统提示').then(() => {
        const inputValidator = (val) => {
          if (!val || val.length < 1) return "请输入您驳回原因"
          return true
        }
        return this.createdPrompt("系统提示", "请输入处理意见", inputValidator, null)
      }).then(({value}) => {
        data.handlerOpinion = value
        return startMyActTaskApi.handlerNodeApply(this.taskId, data)
      }).then(res => {
        this.$message.success('任务处理成功');
        setInterval(() => this.$emit("refresh"), 1000)
        this.dialogClose()

      })
    }
  }
}
</script>

<style lang="scss">
.startActTaskUserHandler {
  .el-dialog__body {
    padding: 5px;
    height: calc(100% - 120px);

    .el-row {
      height: 100%;
    }

    .el-col {
      height: 100%;
    }
  }
}
</style>
